import React, { useEffect, useState, useMemo } from "react";

import { NavBar, Toast, Badge } from "react-vant";

import axios from "axios";

import PageMsg from "./PageMsg";
import { createFromIconfontCN } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";


const IconFont = createFromIconfontCN(
  "//at.alicdn.com/t/c/font_4505052_cydbqnd7jr7.js"
);
function WebSocketComponent() {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  const [message, setMessage] = useState([]);

  const isAllRead = useMemo(() => {
    return message.some((mes) => !mes.is_read);
  }, [message]);

  const getShop = () => {
    axios.get("http://127.0.0.1:3000/lx/gShop").then((res) => {
      console.log(res.data.data,22222);
      
      setList(res.data.data);
      setMessage(res.data.data1);
    });
  };

  useEffect(() => {
    getShop();
  }, []);

  return (
    <div style={{ width: "100%" }}>
      <NavBar
        title="消息"
        rightText={
          <Badge dot={isAllRead}>
            <IconFont
              name="icon-qingchu1"
              style={{ fontSize: "25px", color: "#333" }}
            />
          </Badge>
        }
        onClickLeft={() => navigate(-1)}
        onClickRight={() => {
          axios.post("http://127.0.0.1:3000/lx/updateChat").then((res) => {
            // setMessages(res.data.data1);
            console.log(res.msg);
            getShop();
            Toast.success("清除成功");
          });
          // Toast.success("清除成功");
        }}
      />
      <PageMsg list={list} IconFont={IconFont} />
    </div>
  );
}

export default WebSocketComponent;
